//前端全局配置文件（相当于后端的application.properties）
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import router from './router'

//引入element-plus组件库
import ElementPlus, {ElMessage} from 'element-plus'
import 'element-plus/dist/index.css'

//引入element-plus图标库
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

//修改elementPlus默认中文
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'


//相当于new一个名字叫app的VUE对象
const app = createApp(App)

//遍历ElementPlusIconsVue对象中的所有图标组件并注册到app中
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

//配置根路径
const BASE_URL = 'http://localhost:8080';
//window是内置的全局对象,给它设置属性,此属性可以在任意script标签中使用!
window.BASE_URL = BASE_URL;

//给app也就是vue实例也设置根路径,这样可以在任意template标签中使用!
app.config.globalProperties.BASE_URL = BASE_URL;

//使用使用Element-plus组件库，并将字体设置为中文；使用全局状态管理工具；使用路由；将app挂载到index.html静态页面的id为“app”的div中
app.use(ElementPlus,{ locale: zhCn }).use(store).use(router).mount('#app')

//定义获取当前登录用户的全局方法
window.getUser = ()=>{
    //如果没有获取到user数据,将undefined转为null值
    //如果获取到了user数据,需要将存入时的JSON字符串转回JS对象,方便后续使用
    return localStorage.user ? JSON.parse(localStorage.user) : null;
}
const debounce = (fn, delay) => {
    let timer = null;
    return function () {
        let context = this;
        let args = arguments;
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver {
    constructor(callback) {
        callback = debounce(callback, 16);
        super(callback);
    }
}

//设置路由守卫: 防止未登录用户或非管理员用户通过输入url路径访问管理端页面
router.beforeEach((to, from, next) => {//to即将访问的目标 from即将离开的路由 next路由导航守卫的动作函数
    //从localStorage中获取user数据
    let user = localStorage.user ? JSON.parse(localStorage.user) : null;
    //包括所有管理端页面的路径，暂时先写了用户管理
    if (to.path === '/userManage' && !user)
        //就重定向到首页,且提示"请先登录!"
        //query: { redirect: to.fullPath }
        next({ path: '/homepage', query: { redirect: to.fullPath } },ElMessage.error('请先登录'))
    else if(to.path === '/userManage' && user.level==="0")
        next({ path: '/homepage', query: { redirect: to.fullPath } },ElMessage.error('暂无权限'))
    else
        next()//如果目标路径是登录或首页,或用户已登录,则允许路由跳转
})

/*路由守卫方法考虑到如果已登录的普通用户无法在前端页面点击页面跳转到管理端页面，
* 即前端根据用户等级对展示内容进行了删减，则无需进行普通用户的拦截
* 但考虑到我们的用户信息储存在localstorage里面，持久化保存到浏览器的缓存中
* 因此存在普通用户从浏览器直接通过访问路径的方式访问我们的管理端页面
* 因此采用上面那种拦截方式，即对普通用户增加路由守卫
* 下面写法整合了判断条件，但是提示信息不够具体，因此采用了如上判断方式*/

/*router.beforeEach((to, from, next) => {//to即将访问的目标 from即将离开的路由 next路由导航守卫的动作函数
    //从localStorage中获取user数据
    let user = localStorage.user ? JSON.parse(localStorage.user) : null;
    //包括所有管理端页面的路径，暂时先写了用户管理
    if (to.path === '/userManage' && (!user || user.level==="0"))
        //就重定向到首页,且提示"请先登录!"
        //query: { redirect: to.fullPath }
        next({ path: '/homepage', query: { redirect: to.fullPath } },ElMessage.error('请先登录'))
    else
        next()//如果目标路径是登录或首页,或用户已登录,则允许路由跳转
})*/
